<template>
	<div style="overflow: hiden;" v-loading="formLoading">
		<div style="height: 50px;padding-top:20px">
			<span style="float: left;font-size: 14px;"><em style="color: red;font-style: normal;">tips：</em>建议首页轮播图尺寸大小为(宽750*高375);排序越大越靠前</span>
			<el-button v-if="permission == 3" style="float: right;" type="primary" @click="linkToCreate">添加图片</el-button>
		</div>
		<el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="id" fit highlight-current-row style="width: 100%;margin-top: 20px;color:#222;font-size: 12px;font-family: PingFangSC-Regular;">
      <el-table-column align="center" label="排序" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>
      <el-table-column  width="250"  align="center" label="链接">
        <template slot-scope="scope">
          <span>{{scope.row.link}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300"  align="center" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="200" height="100"/>
        </template>
      </el-table-column>
      <el-table-column  width="250"  align="center" label="图片位置">
        <template slot-scope="scope">
          <span>{{(scope.row.name == '' || scope.row.name == null) ?'首页' :scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="permission == 3">
        <template slot-scope="scope">
          <b @click="linkToEdit(scope.row.imageId)">编辑</b>
          <span class="color-409">|</span>
          <b @click="deletePic(scope.$index, scope.row.imageId)">删除</b>
        </template>
      </el-table-column>
    </el-table>
	</div>
</template>

<script>
import { getImageList, delImage } from '@/api/systemManage'
import { shopManage_systemManage } from '@/utils/permission'
export default {
  data() {
    return {
      formLoading: false,
      permission: 3,
      tableData: [],
      catList:[]
    }
  },
  created() {
    this.getModelPermission()
    this.initList()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_systemManage()
    },
    initList() {
      getImageList({ type: 1 }).then(res => {
        this.tableData = res.data.data.images
        this.catList = res.data.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    deletePic(index, id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formLoading = true
        delImage(id).then(res => {
          this.formLoading = false
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.tableData.splice(index, 1)
        }).catch(err => {
          this.formLoading = false
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    linkToEdit(id) {
      localStorage.setItem('catList',JSON.stringify(this.catList))
      this.$router.push({ path: `/shopManage/editSwiper/${id}` })
    },
    linkToCreate() {
      localStorage.setItem('catList',JSON.stringify(this.catList))
      // if (this.tableData.length < 5) { // 不能超过5张图
        this.$router.push({ path: `/shopManage/createSwiper` })
      // } else {
      //   this.$message({
      //     type: 'warning',
      //     message: '轮播图最多5张图片！'
      //   })
      // }
    }
  }
}
</script>
